<template>
  <div id="mapTrack">
    <el-card class="box-card" shadow="never" :body-style="{ padding: '0' }">
      <div id="map-container" class="map-container" :style="{ height: '88vh' }">
        <div class="loading-tip" v-if="beforeInit && initSimplifier">加载数据，请稍候...</div>
      </div>

      <!--选择时间-->
      <div class="search-box form-table-search">
        <div class="rowset">
          <label>车牌号码：</label>
          <label>{{ carNumber }}</label>
        </div>
        <div class="rowset" v-if="showType === 2">
          <label>跟踪开关：</label>
          <el-switch class="follow" v-model="followStatus"></el-switch>
        </div>
        <div class="rowset" v-if="showType === 2">
          <label>跟踪频率：</label>
          <el-select size="mini" v-model="rateValue" placeholder="请选择">
            <el-option v-for="item in rateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="rowset" v-if="showType === 1">
          <label>开始时间：</label>
          <el-date-picker
            size="small"
            v-model="startTime"
            type="datetime"
            placeholder="请选择开始时间"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            @change="timeChangeHandle"
          ></el-date-picker>
        </div>
        <div class="rowset" v-if="showType === 1">
          <label>结束时间：</label>
          <el-date-picker
            size="small"
            v-model="endTime"
            type="datetime"
            placeholder="请选择结束时间"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            @change="timeChangeHandle"
          ></el-date-picker>
        </div>

        <div class="btn-set-true" v-if="showType === 1">
          <!-- 轨迹播放滑块 -->
          <div class="play-box">
            <div class="playIcon fl" v-if="isPlay">
              <el-button
                type="text"
                v-if="palyStayus === 0"
                icon="el-icon-video-play"
                value="开始动画"
                @click="navgControl('start')"
                :disabled="beforeInit"
              ></el-button>
              <el-button
                type="text"
                v-if="palyStayus === 1"
                icon="el-icon-video-play"
                value="继续动画"
                @click="navgControl('resume')"
                :disabled="beforeInit"
              ></el-button>
            </div>
            <div class="playIcon fl" v-if="!isPlay">
              <el-button type="text" icon="el-icon-video-pause" value="暂停动画" @click="navgControl('pause')" :disabled="beforeInit"></el-button>
            </div>
            <div class="progress fl" style="margin-right: 0">
              <el-button type="text" icon="el-icon-d-arrow-left" value="减速" :disabled="isMinSpeed" @click="changeSpeed('less')"></el-button>
            </div>
            <div class="progress fl">
              <el-button type="text" class="speed fl">{{ times }}X</el-button>
            </div>
            <div class="progress fl">
              <el-button type="text" icon="el-icon-d-arrow-right" value="加速" :disabled="isMaxSpeed" @click="changeSpeed('add')"></el-button>
            </div>
          </div>
          <div class="progress fl" style="margin: 0 0 0 10px">
            <el-slider
              v-model="sliderVal"
              :show-tooltip="false"
              :format-tooltip="hideFormat"
              :step="0.0001"
              :disabled="beforeInit"
              @change="carReLocate"
            ></el-slider>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import utils from 'utils'

export default {
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      }
    },
    showType: {
      type: Number,
      default: 1
    }
  },
  watch: {
    sliderVal(newVal) {
      if (!this.isOnSlider) {
        return false
      }
      this.sliderChange(newVal)
    },
    rateValue(newVal) {
      if (this.followStatus) {
        clearInterval(this.delayTimer)
        this.delayTimer = setInterval(() => {
          const curTime = new Date()
          this.startTime = utils.fomartDate(curTime.getTime() - newVal * 1000)
          this.endTime = utils.fomartDate(curTime, '{y}-{m}-{d} {h}:{i}:{s}')
          this.followPathSimplifier()
        }, newVal * 1000)
      } else {
        clearInterval(this.delayTimer)
      }
    }
  },
  data() {
    return {
      delayTimer: null,
      followStatus: false, // 跟踪开关
      rateValue: '', // 跟踪频率
      // carNumber: '粤B1815B', // 车牌号码
      // startTime: '2021-02-18 18:00:00', // 查询开始时间
      // endTime: '2021-02-18 20:00:00', // 查询结束时间
      carNumber: '', // 车牌号码
      startTime: '', // 查询开始时间
      endTime: utils.fomartDate(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'), // 查询结束时间

      initSimplifier: false,
      // 信息窗体
      infoWindow: null,
      // 巡航轨迹
      AMap: null,
      map: null,
      PathSimplifier: null,
      beforeInit: true,
      isPlay: true,
      sliderVal: 0, // 进度条
      times: 1, // 倍速
      maxSpeed: 8, // 最高倍速
      navgtrSpeed: 800, // 速度
      isMinSpeed: true,
      isMaxSpeed: false,
      navgtr: null,
      pathSimplifierIns: null,
      actualList: [],
      rateOptions: [
        {
          label: '10秒',
          value: 10
        },
        {
          label: '30秒',
          value: 30
        },
        {
          label: '1分钟',
          value: 60
        },
        {
          label: '2分钟',
          value: 120
        },
        {
          label: '5分钟',
          value: 300
        }
      ],
      defaultRenderOptions: {
        renderAllPointsIfNumberBelow: -1, // 描绘路径点，如不需要设为-1
        pathTolerance: 2,
        keyPointTolerance: 0,
        pathLineStyle: {
          lineWidth: 6,
          strokeStyle: '#409eff',
          borderWidth: 1,
          borderStyle: '#eeeeee',
          dirArrowStyle: false
        },
        pathLineHoverStyle: {
          lineWidth: 6,
          strokeStyle: '#ff0000',
          borderWidth: 1,
          borderStyle: '#cccccc',
          dirArrowStyle: false
        },
        dirArrowStyle: {
          stepSpace: 30,
          strokeStyle: '#ffffff',
          lineWidth: 2
        },
        pathLineSelectedStyle: {
          lineWidth: 6,
          strokeStyle: '#409eff',
          borderWidth: 1,
          borderStyle: '#cccccc',
          dirArrowStyle: true
        },
        keyPointStyle: {
          radius: 0,
          fillStyle: 'rgba(8, 126, 196, 1)',
          lineWidth: 1,
          strokeStyle: '#eeeeee'
        },
        keyPointHoverStyle: {
          radius: 0,
          fillStyle: 'rgba(0, 0, 0, 0)',
          lineWidth: 2,
          strokeStyle: '#ffa500'
        },
        keyPointOnSelectedPathLineStyle: {
          radius: 0,
          fillStyle: 'rgba(8, 126, 196, 1)',
          lineWidth: 2,
          strokeStyle: '#eeeeee'
        }
      },
      isCursorAtPathEnd: false,
      palyStayus: 0, //0->未开始  1->行驶中  2->暂停
      value: 0, // 进度条初始化

      // 分页 *******************
      trackTableData: [],
      trackTableDataBak: [],

      signMarker: null,
      center: [116.397428, 39.90923],
      currentPoint: null,

      //*********
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '前2小时',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 2)
              picker.$emit('pick', date)
            }
          },
          {
            text: '前6小时',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 6)
              picker.$emit('pick', date)
            }
          },
          {
            text: '前12小时',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 12)
              picker.$emit('pick', date)
            }
          },
          {
            text: '前1天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      timeValue: '',
      trackData: []
    }
  },
  created() {
    const { latitude = '22.648411', longitude = '114.124509' } = utils.getStore('cityInfo')
    this.center = [longitude, latitude]
    this.carNumber = this.initData.carNumber
  },
  mounted() {
    // 为滑动条版绑定监听事件
    let that = this
    if (this.showType === 1) {
      let el = document.getElementsByClassName('el-slider__button-wrapper')[0]
      let el2 = document.getElementsByClassName('el-slider__runway')[0]
      el2.addEventListener('click', that.sliderChange, false)
      el.addEventListener('mousedown', that.openSlider, false)
      // 此处用document是因为，滑动较为随意时，mouseup可能不是作用在el上
      document.addEventListener('mouseup', that.closeSlider, false)
    } else {
      this.followPathSimplifier()
    }

    lazyAMapApiLoaderInstance.load().then(() => {
      // 初始化地图
      this.initMap()
      // 初始化点位
      this.initMarker()
      // 初始化信息窗体
      this.initInfoWindow()
    })
  },
  methods: {
    // 时间改变
    timeChangeHandle() {
      if (this.startTime && this.endTime) {
        console.log(new Date(this.startTime).getTime() - new Date(this.endTime).getTime())
        if (new Date(this.startTime).getTime() > new Date(this.endTime).getTime()) {
          this.$msgTip('开始时间不能大于结束时间', 'warning')
        } else if (86400000 - (new Date(this.endTime).getTime() - new Date(this.startTime).getTime()) >= 0) {
          this.queryTimes()
        } else {
          this.$msgTip('只能查询结束时间前1天内的车辆轨迹', 'warning')
        }
      } else {
        this.$msgTip('请选择时间区域', 'warning')
        // 如果已存在巡航轨迹，则删除
        if (window.pathSimplifierIns && this.pathSimplifierIns) {
          //通过该方法清空上次传入的轨迹
          this.pathSimplifierIns.setData([])
        }
      }
    },
    // 跟踪巡航组件实例
    followPathSimplifier() {
      let that = this
      const { updateTime, carRunLatitude, carRunLongitude, speed } = this.initData
      AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }
        // 从列表进入，初始化车的数据
        let pointDataList = [
          {
            lng: carRunLongitude,
            lat: carRunLatitude,
            receiveTime: updateTime,
            cs: speed
          }
        ]
        // 获取车辆最后上报的时间
        this.startTime = updateTime

        that.initSimplifier = true
        that.signMarker.setLabel({})
        that.$api.vehicle
          .fetch('carLocus', {
            lpn: this.carNumber,
            queryDateFrom: this.startTime,
            queryDateTo: this.endTime
          })
          .then(res => {
            let linArray = []
            res.forEach(val => {
              linArray.push([val.longitude, val.latitude])
              pointDataList.push({
                lng: val.longitude,
                lat: val.latitude,
                receiveTime: val.createTime,
                cs: val.speed
              })
            })
            // 如果已存在巡航轨迹，则删除
            if (window.pathSimplifierIns && that.pathSimplifierIns) {
              //通过该方法清空上次传入的轨迹
              that.pathSimplifierIns.setData([])
            }
            // 初始化坐标点
            if (linArray.length > 0) {
              that.signMarker.show()
              that.signMarker.setPosition(linArray[0])

              that.actualList = linArray

              //创建一个巡航轨迹路线
              that.pathSimplifierIns = new PathSimplifier({
                zIndex: 100, //地图层级，
                map: this.map, //所属的地图实例
                //巡航路线轨迹列表
                getPath: function (pathData) {
                  return pathData.path
                },
                //hover每一个轨迹点，展示内容
                // getHoverTitle: function (pathData, pathIndex, pointIndex) {
                /*if (pointIndex >= 0) {
                      return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                    }
                    return pathData.name + '，点数量' + pathData.path.length;*/
                // return ''
                // },
                //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档 renderOptions:{}
                //绘制路线节点
                renderOptions: that.defaultRenderOptions
              })
              window.pathSimplifierIns = that.pathSimplifierIns
              //设置数据
              that.pathSimplifierIns.setData([
                {
                  name: '轨迹路线',
                  path: that.actualList
                }
              ])
              that.pathSimplifierIns.setSelectedPathIndex(0)

              //对第一条线路（即索引 0）创建一个巡航器
              let image = PathSimplifier.Render.Canvas.getImageContent(
                require('images/user-car/online.png'),
                () => {
                  that.pathSimplifierIns.renderLater()
                },
                () => {
                  console.log('图片加载失败！')
                }
              )

              that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
                loop: false, //循环播放
                speed: that.navgtrSpeed, //巡航速度，单位千米/小时
                pathNavigatorStyle: {
                  width: 26,
                  height: 52,
                  //使用图片
                  content: image, // 自定义巡航样式
                  strokeStyle: null,
                  fillStyle: null,
                  //经过路径的样式
                  pathLinePassedStyle: {
                    lineWidth: 6,
                    strokeStyle: '#69f81e',
                    dirArrowStyle: {
                      stepSpace: 15,
                      strokeStyle: '#FFF'
                    }
                  }
                }
              })

              that.navgtr.on('start resume', function () {
                that.navgtr._startTime = Date.now()
                that.navgtr._startDist = this.getMovedDistance()
              })
              that.navgtr.on('stop pause', function () {
                that.navgtr._movedTime = Date.now() - that.navgtr._startTime
                that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist
              })
              that.navgtr.on('move', function (data, position) {
                that.isCursorAtPathEnd = false
                let idx = position.dataItem.pointIndex //走到了第几个点
                let tail = position.tail //至下一个节点的比例位置
                let totalIdx = idx + tail
                let len = position.dataItem.pathData.path.length
                console.log(totalIdx, len)
                // 设置当前点位
                that.currentPoint = that.actualList[idx]
                // 打开信息窗体
                let content = [
                  '<div style="padding: 5px;">',
                  '<div>接收时间 : ' + pointDataList[idx].receiveTime + '</div>',
                  '<div>速&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度 : ' + pointDataList[idx].cs + '(km/h)</div>',
                  '<div>经&nbsp;&nbsp;纬&nbsp;&nbsp;度 : ' + pointDataList[idx].lng + ',' + pointDataList[idx].lat + '</div>',
                  '</div>'
                ]
                that.infoWindow.setContent(content.join(''))
                that.infoWindow.open(that.map, that.actualList[idx])

                // 计算下一个距离速度
                // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
                // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
                // that.navgtr._realSpeed = (that.navgtr._movedDist / that.navgtr._movedTime * 3600);
                // let point = trackList[idx]
                if (idx < len - 1) {
                  // that.navgtr.setSpeed(that.navgtr._realSpeed * that.times);
                  that.navgtr.setSpeed(that.navgtrSpeed * that.times)
                }
                // 进度条实时展示tail
                !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100)
                console.log(that.sliderVal)
                // 已经播放时间
                // let sTime = (pointObj.stampTime-startStampTime)/1000;
                // let sTime = parseInt((endPoint.stampTime - startPoint.stampTime) / 1000 * that.sliderVal / 100);
                //
                // that.passedTime = that.getTime(sTime);
                // 如果到头了，回到初始状态
                if (that.navgtr.isCursorAtPathEnd()) {
                  that.isCursorAtPathEnd = true
                  that.initPlayBox()
                }
              })

              // 加载完成
              that.beforeInit = false
            } else {
              that.signMarker.hide()
              that.signMarker.setLabel({})
            }
          })
          .finally(() => {
            // 隐藏加载
            that.initSimplifier = false
          })
      })
    },
    // 初始化巡航组件实例
    initPathSimplifier() {
      let that = this
      AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！')
          return
        }

        that.initSimplifier = true
        that.signMarker.setLabel({})
        that.$api.vehicle
          .fetch('carLocus', {
            lpn: this.carNumber,
            queryDateFrom: this.startTime,
            queryDateTo: this.endTime
          })
          .then(res => {
            let linArray = []
            let pointDataList = []
            res.forEach(val => {
              linArray.push([val.longitude, val.latitude])
              pointDataList.push({
                lng: val.longitude,
                lat: val.latitude,
                receiveTime: val.createTime,
                cs: val.speed
              })
            })
            // 如果已存在巡航轨迹，则删除
            if (window.pathSimplifierIns && that.pathSimplifierIns) {
              //通过该方法清空上次传入的轨迹
              that.pathSimplifierIns.setData([])
            }
            // 初始化坐标点
            if (linArray.length > 0) {
              that.signMarker.show()
              that.signMarker.setPosition(linArray[0])

              that.actualList = linArray

              //创建一个巡航轨迹路线
              that.pathSimplifierIns = new PathSimplifier({
                zIndex: 100, //地图层级，
                map: this.map, //所属的地图实例
                //巡航路线轨迹列表
                getPath: function (pathData) {
                  return pathData.path
                },
                //hover每一个轨迹点，展示内容
                // getHoverTitle: function (pathData, pathIndex, pointIndex) {
                /*if (pointIndex >= 0) {
                      return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                    }
                    return pathData.name + '，点数量' + pathData.path.length;*/
                // return ''
                // },
                //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档 renderOptions:{}
                //绘制路线节点
                renderOptions: that.defaultRenderOptions
              })
              window.pathSimplifierIns = that.pathSimplifierIns
              //设置数据
              that.pathSimplifierIns.setData([
                {
                  name: '轨迹路线',
                  path: that.actualList
                }
              ])
              that.pathSimplifierIns.setSelectedPathIndex(0)

              //对第一条线路（即索引 0）创建一个巡航器
              let image = PathSimplifier.Render.Canvas.getImageContent(
                require('images/user-car/online.png'),
                () => {
                  that.pathSimplifierIns.renderLater()
                },
                () => {
                  console.log('图片加载失败！')
                }
              )

              that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
                loop: false, //循环播放
                speed: that.navgtrSpeed, //巡航速度，单位千米/小时
                pathNavigatorStyle: {
                  width: 26,
                  height: 52,
                  //使用图片
                  content: image, // 自定义巡航样式
                  strokeStyle: null,
                  fillStyle: null,
                  //经过路径的样式
                  pathLinePassedStyle: {
                    lineWidth: 6,
                    strokeStyle: '#69f81e',
                    dirArrowStyle: {
                      stepSpace: 15,
                      strokeStyle: '#FFF'
                    }
                  }
                }
              })

              that.navgtr.on('start resume', function () {
                that.navgtr._startTime = Date.now()
                that.navgtr._startDist = this.getMovedDistance()
              })
              that.navgtr.on('stop pause', function () {
                that.navgtr._movedTime = Date.now() - that.navgtr._startTime
                that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist
              })
              that.navgtr.on('move', function (data, position) {
                that.isCursorAtPathEnd = false
                let idx = position.dataItem.pointIndex //走到了第几个点
                let tail = position.tail //至下一个节点的比例位置
                let totalIdx = idx + tail
                let len = position.dataItem.pathData.path.length
                console.log(totalIdx, len)
                // 设置当前点位
                that.currentPoint = that.actualList[idx]
                // 打开信息窗体
                let content = [
                  '<div style="padding: 5px;">',
                  '<div>接收时间 : ' + pointDataList[idx].receiveTime + '</div>',
                  '<div>速&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度 : ' + pointDataList[idx].cs + '(km/h)</div>',
                  '<div>经&nbsp;&nbsp;纬&nbsp;&nbsp;度 : ' + pointDataList[idx].lng + ',' + pointDataList[idx].lat + '</div>',
                  '</div>'
                ]
                that.infoWindow.setContent(content.join(''))
                that.infoWindow.open(that.map, that.actualList[idx])

                // 计算下一个距离速度
                // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
                // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
                // that.navgtr._realSpeed = (that.navgtr._movedDist / that.navgtr._movedTime * 3600);
                // let point = trackList[idx]
                if (idx < len - 1) {
                  // that.navgtr.setSpeed(that.navgtr._realSpeed * that.times);
                  that.navgtr.setSpeed(that.navgtrSpeed * that.times)
                }
                // 进度条实时展示tail
                !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100)
                console.log(that.sliderVal)
                // 已经播放时间
                // let sTime = (pointObj.stampTime-startStampTime)/1000;
                // let sTime = parseInt((endPoint.stampTime - startPoint.stampTime) / 1000 * that.sliderVal / 100);
                //
                // that.passedTime = that.getTime(sTime);
                // 如果到头了，回到初始状态
                if (that.navgtr.isCursorAtPathEnd()) {
                  that.isCursorAtPathEnd = true
                  that.initPlayBox()
                }
              })

              // 加载完成
              that.beforeInit = false
            } else {
              that.signMarker.hide()
              that.signMarker.setLabel({})
            }
          })
          .finally(() => {
            // 隐藏加载
            that.initSimplifier = false
          })
      })
    },

    openSlider() {
      this.isOnSlider = true
    },
    closeSlider() {
      this.isOnSlider = false
    },
    hideFormat() {
      return ''
    },
    // 控制播放按钮
    navgControl(type) {
      if (!this.navgtr || !type) {
        return
      }
      if (type === 'start' || type === 'resume') {
        this.isPlay = false
        this.palyStayus = 2
        // 如果已经到了终点，重新定位坐标
        if (this.isCursorAtPathEnd && this.actualList.length > 0) {
          this.map.setCenter(this.actualList[0])
        }
      } else if (type === 'pause') {
        this.isPlay = true
        this.palyStayus = 1
      }
      this.navgtr[type]()
    },
    // 滑块改变位置
    sliderChange(val) {
      if (this.beforeInit) {
        return
      }
      // 先改为播放状态
      if (this.palyStayus === 0) {
        this.navgControl('start')
        this.navgControl('pause')
      }
      // 移动巡航器
      let newVal = typeof newVal === 'number' ? val : this.sliderVal
      let num = parseInt((newVal / 100) * this.actualList.length)
      let decimal = String((newVal / 100) * this.actualList.length).split('.')[1] || 0
      this.navgtr.moveToPoint(num, Number('0.' + decimal))
      this.pathSimplifierIns.renderLater()
    },
    // 改变倍速
    changeSpeed(operate) {
      let base = 2
      this.isMinSpeed = false
      this.isMaxSpeed = false
      if (operate === 'add') {
        if (this.times * base === this.maxSpeed) {
          this.times *= base
          this.isMaxSpeed = true
          this.isMinSpeed = false
        } else if (this.times + base > this.maxSpeed) {
          this.times = this.maxSpeed
          this.isMaxSpeed = true
          this.isMinSpeed = false
        } else {
          this.times *= base
        }
      } else if (operate === 'less') {
        if (this.times / base === 1) {
          this.times /= base
          this.isMinSpeed = true
          this.isMaxSpeed = false
        } else if (this.times - base < 1) {
          this.times /= 1
          this.isMinSpeed = true
          this.isMaxSpeed = false
        } else {
          this.times /= base
        }
      }
    },

    // 查询当天车辆数据采集时间
    queryTimes() {
      if (this.startTime && this.endTime && this.carNumber) {
        if (this.infoWindow) {
          this.infoWindow.close()
        }
        this.initPlayBox()
        this.beforeInit = true
        // 初始化巡航组件
        this.initPathSimplifier()
      } else if (!this.carNumber) {
        this.$msgTip({
          message: '请选择车辆',
          type: 'warning'
        })
      }
    },
    // 选中表单时间触发，查询指定时间车辆位置
    queryPointInfo(row) {
      // console.log(this.trackData[row.index])
      let position = [this.trackData[row.index].lng, this.trackData[row.index].lat]
      this.signMarker.setPosition(position)
      this.signMarker.setLabel({
        offset: new AMap.Pixel(0, -15), // 设置文本标注偏移量
        content: '<div style="background-color: rgba(0,0,0,0);">' + position[0] + ',' + position[1] + '</div>', // 设置文本标注内容
        direction: 'top' // 设置文本标注方位
      })
      this.map.setCenter(position)
    },

    // 初始化地图
    initMap() {
      // map-test为div的id
      // zooms: [3, 18], // 地图缩放范围
      // eslint-disable-next-line no-undef
      this.map = new AMap.Map('map-container', {
        resizeEnable: true, // 窗口大小调整
        // eslint-disable-next-line no-undef
        center: this.center, // 地图中心点
        zoom: 10
      })
    },
    initMarker() {
      // 引入Marker,绘制点标记
      this.signMarker = new AMap.Marker({
        map: this.map,
        offset: new AMap.Pixel(-4, -4),
        visible: false,
        content:
          '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.9); height: 10px; width: 10px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>'
      })
    },
    initInfoWindow() {
      // 创建 infoWindow 实例
      this.infoWindow = new AMap.InfoWindow({
        anchor: 'bottom-center',
        autoMove: false,
        offset: new AMap.Pixel(0, -20),
        content: '' //传入 dom 对象，或者 html 字符串
      })
    },

    /**
     * 轨迹回放重新定位
     */
    carReLocate() {
      // 鼠标从滑动条抬起时，重新定位
      if (this.currentPoint) {
        let timeout = setTimeout(() => {
          clearTimeout(timeout)
          this.map.setCenter(this.currentPoint)
        }, 0)
      }
    },
    // 初始化播放器状态
    initPlayBox() {
      // 暂停
      this.navgControl('pause')
      this.playIcon = 'start'
      this.isPlay = true // 播放图标
      this.palyStayus = 0 // 继续状态
      this.sliderVal = 0 // 进度条清0
    }
  }
}
</script>

<style scoped lang="less">
@deep: ~'>>>';
.map-container {
  width: 100%;

  @{deep}.amap-marker-label {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ffe099 !important;
  }

  @{deep}.amap-info {
    width: 350px;
  }

  @{deep}.amap-info-close {
    display: none;
  }
}

.button {
  float: bottom;
}

.play-box {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 275px;
  height: 25px;
  -ms-flex-pack: center;
  -ms-flex-align: center;

  .el-button {
    padding: 0px;
    font-size: 25px;
  }

  .playIcon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 20px 0 25px;
  }

  .progress {
    display: inline-block;
    /*height: 35px;*/
    width: 300px;
    margin: 0px 15px;
  }

  .speed {
    width: 40px;
    padding-left: 10px;
    font-size: 15px;
    font-weight: bolder;
    color: #1890ff;
    text-align: center;
    cursor: pointer;
  }

  .fl {
    float: left;
  }
}

.loading-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 3px 10px;
  font-size: 13px;
  color: #fff;
  background: red;
}

.box-card {
  position: relative;
}

.search-box {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.form-table-search {
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
}

.rowset {
  margin-bottom: 10px;
  overflow: hidden;
  text-align: left;
  label {
    display: inline-block;
    font-size: 12px;
  }
  .follow {
    margin-left: 10px;
  }
}
</style>
